import React, { useState } from 'react'

// 把 timer 提取到了外面，这样的话能保证公用的是同一个 timer
// !带来了一个新问题：如果有多个组件实例的话，其实多个组件实例公用的是同一个 timer，会相互影响
let timer = null

export default function App() {
  const [count, setCount] = useState(10)
  const handleClick = () => {
    // 这里确实是防抖：不是节流
    clearInterval(timer)
    timer = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开启定时器</button>
    </div>
  )
}
